<template>
    <div class="InvoiceInfo2">
        <div class="shareHeadClass" >
            <p class="colCLas"></p>
            <p class="info">发票信息</p>
        </div>
        <div style="margin-bottom: 8px" v-show="(flag == ('手工-待提交') ) || (flag == ('手工-已退回'))" v-if="!isLook" >
            <el-button size="small" @click="invoiceAdd">
                新增
            </el-button>
            <el-button size="small" @click="invoiceEdit">修改</el-button>
            <el-button size="small" @click="invoiceDel">删除</el-button>
            <el-button size="small" @click="importExcel">导入</el-button>
        </div>


        <tableList
            v-if="tableShow"
            :showIndex="true"
            border
            :style="{
                height:
                350 +
                    85 +
                    'px' ,
                    
            }"
            :keySet="keySet"
            :autoHeight="true"
            :tableData="$store.state.invoice2.invoinceFormInfo2.records"
            :pageNumber="$store.state.invoice2.invoinceFormInfo2.current"
            :pageSize="$store.state.invoice2.invoinceFormInfo2.size"
            :total="$store.state.invoice2.invoinceFormInfo2.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange" 
            :radioSelect="true"
            @radioHandleCurrentChange="radioHandleCurrentChange"
            ref="tableRef"
            :paginationShow="true"

        >
            <template #gmfmc="{row}">
                <div>
                    {{ row.gmfmc }}
                </div>
            </template>
            <template #gmfnsrsbh="{row}">
                <div>
                    {{ row.gmfnsrsbh }}
                </div>
            </template>
            <template #jems="{row}">
                <div>
                    {{ row.jems== '01' ? '不含税' :'含税' }}
                </div>
            </template>
            <template #hjje="{row}">
                <div>
                    {{ row.hjje ? (Number(row.hjje).toFixed(2)) : row.hjje }}
                </div>
            </template>
            <template #hjse="{row}">
                <div>
                    {{ row.hjse }}
                </div>
            </template>
            <template #jshj="{row}">
                <div>
                    {{ row.jshj  || row.hsje}}
                </div>
            </template>
            <template #tdys="{row}">
                <div>
                    {{ tedingyaosuSelect[row.tdys] }}
                </div>
            </template>
            <template #gmfsfwzrr="{row}">
                <div>
                    {{ row.gmfsfwzrr == '01' ? '是' :"否" }}
                </div>
            </template>
            <template #bz="{row}">
                <div>
                    {{ row.bz }}
                </div>
            </template>
        </tableList>

        <realMakeInvoiceComp
            ref="realMakeInvoiceComp"
            @refresh="refresh"
            :invoiceCategory="invoiceCategory"
        />



        <el-dialog :visible.sync="importDialogShow"  width="400px" :modal="false"  :before-close="closeImportDialog" title="导入信息提示">
            <template >
                <el-upload
                    v-if="importDialogBefore"
                    drag
                    action=" "
                    :on-change="handleChange"
                    :file-list="fileList"
                    :auto-upload="false"
                    :limit="1"
                    :on-exceed="limitMessage"
                    >
                    <i class="el-icon-upload"></i>
                    
                </el-upload>
                <p class="el-upload__text" style="word-wrap:break-word;width: 370px;">导入数据需要使用系统内固定的模板，如您还未取得相应的模板，请点击<span style="color: #409eff;cursor:pointer" @click="downExcel">下载</span>获取模板后，再进行文件上传。</p>
            </template>

            <span slot="footer" class="dialog-footer">
                <vxe-button content="取消" @click="closeImportDialog"></vxe-button>
                <vxe-button content="读取" @click="confirmImport" :disabled="fileList.length == 0"></vxe-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="msgShow" :modal="false" :class="[
            messageDialog&&messageDialog.length > 18 ? 'www':''
        ]" :before-close="msgDialogFn">
                <div style="max-height: 92vh;overflow-y: auto;overflow-x: hidden;">
                    <div v-for="(msg,index) in messageDialog" :key="index">
                    {{ msg }}
                </div>
                </div>
        </el-dialog>
    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import mixinTable from '@/mixin/mtable.js'
import realMakeInvoiceComp from '../invoice/realMakeInvoiceComp.vue'
import {  mixinVariable } from '@/utils/mixin.js'
import { downloadExcel } from '@/api/fileDownload.js'
import { readExcel } from '@/api/vmsClassifyCode.js'

export default {
    name: 'InvoiceInfo2',
    mixins: [mixinTable ,mixinVariable],
    props: {
        invoiceCategory:{
            type:String,
            default:''
        },
        flag:{
            type:String,
            // default:''
        },
        isLook:{
            type:Boolean,
            default: false
        },
    },
    data() {
        return {
            tableShow: true,
            chineseTransform:{},
            selfForm: {},
            keySet: [
                {
                    label: '购方名称',
                    englishName: 'gmfmc',
                    isSlot: true,
                    slotName: 'gmfmc',
                    width:'200'
                },
                {
                    label: '购方纳税人识别号',
                    englishName: 'gmfnsrsbh',
                    isSlot: true,
                    slotName: 'gmfnsrsbh',
                    width:'160'
                },

                {
                    label: '不含税金额合计',
                    englishName:"hjje",
                    isSlot: true,
                    slotName: 'hjje',
                    width:'labelWidth'
                },
                {
                    label: '税额合计',
                    englishName:"hjse",
                    isSlot: true,
                    slotName: 'hjse',
                    width:'labelWidth'
                },
                {
                    label: '含税金额合计',
                    englishName:"jshj",
                    isSlot: true,
                    slotName: 'jshj',
                    width:'labelWidth'
                },
                {
                    label: '特定要素',
                    englishName:"tdys",
                    isSlot: true,
                    slotName: 'tdys',
                    width:'labelWidth'
                },
                {
                    label: '购买方是否为自然人',
                    englishName:"gmfsfwzrr",
                    isSlot: true,
                    slotName: 'gmfsfwzrr',
                    width:'labelWidth'
                },
                {
                    label: '金额模式',
                    englishName: 'jems',
                    isSlot: true,
                    slotName: 'jems',
                    width:'labelWidth'
                },
                {
                    label: '备注',
                    englishName:"bz",
                    isSlot: true,
                    slotName: 'bz',
                },
            ],
            rules: {
                listDetails: [
                    {
                        required: true,
                        message: '请选择发票',
                        trigger: 'change',
                    },
                ],
            },
            importDialogShow:false,
            importDialogBefore:false,
            fileList:[],

            msgShow:false,
            messageDialog:[]
        }
    },
    methods: {
        
        msgDialogFn(){
            this.msgShow = false;
            this.messageDialog = []
        },
        closeImportDialog(){
            this.fileList = []
            this.rawFile = null
            this.importDialogShow = false
            setTimeout(() => {
                this.importDialogBefore = false
            }, 300);

        },
        confirmImport(){
            var form1 = new FormData();
				form1.append("file",this.fileList[0].raw);
				form1.append("applyId", +this.$store.state.invoice2.invoinceFormStart1.busId);
				form1.append("fppz",this.$store.state.invoice2.busData.fppz);

            readExcel(
                form1,
            ).then(({data,code,message})=>{
                if(code === '7012'){
                    // this.$XModal.alert('基本提示框', '提示信息')
                    this.messageDialog = data
                    this.msgShow = true;
                    this.fileList = [];
                }else if(code ==200){
                    this.messageDialog = []
                    this.importDialogShow = false;
                    this.importDialogBefore = false;
                    this.fileList = [];
                    // this.$store.commit('invoice/addAxiosInvoiceInfoList',data)
                    this.$store.dispatch('invoice2/getTwo',{
                        pageNo:1
                    })
                    this.$message.success(message)
                }else if(code !== 200){
                    this.fileList = [];
                }

                this.importDialogBefore = false;
                this.$nextTick(()=>{
                    this.importDialogBefore = true
                })
            })
            
        },
        radioHandleCurrentChange(radioSelectRow){
            this.radioSelectRow = radioSelectRow
        },
        async invoiceAdd(){
            this.$refs.tableRef.$refs.table.setCurrentRow();
            this.$store.dispatch('invoice2/addInvoice').then(data=>{
                this.$nextTick(()=>{
                    this.$refs.realMakeInvoiceComp.show('add')
                })
            })
        },
        invoiceEdit(){
            if(this.radioSelectRow){
                this.$store.dispatch('invoice2/editInvoiceInfo',this.radioSelectRow).then(data=>{
                    this.$refs.realMakeInvoiceComp.show('edit',data);
                })
                
            }else{
                this.$message({
                        type: 'warning',
                        message: '请选择修改的发票信息',
                    })
            }
        },
        invoiceDel(){
            if(this.radioSelectRow){
                return this.$confirm( `是否确定删除已录入发票信息？`,'确认').then(data=>{
                    this.$store.dispatch('invoice2/delInvoiceInfoList',this.radioSelectRow).then(data=>{
                        this.$nextTick(()=>{
                            try {
                                    this.radioSelectRow = null
                                } catch (error) {
                            }
                        })
                    })
                    



                },err=>{
                })
                
            }else{
                this.$message({
                        type: 'warning',
                        message: '请选择删除的发票信息',
                    })
            }
        },
        importExcel(){
            this.importDialogBefore = true
            this.$nextTick(()=>{
                this.importDialogShow = true
            })
        },
        downExcel(){
            downloadExcel({},'get')
        },
        limitMessage(){
            this.$message.error('每次只能上传一个文件')
        },
        handleChange(file, fileList) {
            this.fileList = []
            this.$nextTick(()=>{
                this.fileList = fileList.slice(-3);
            })
        },
        refresh() {
            this.$store.dispatch('invoice2/getTwo',{
                pageNo:1
            })
            this.tableShow = false;
            this.$nextTick(()=>{
                this.tableShow = true;
            })
        },
        handleSizeChange(val)  {
            this.$store.dispatch("invoice2/getTwo", {
                size:val
            });
        },
        handleCurrentChange(val){
            this.$store.dispatch("invoice2/getTwo", {
                current:val
            });
        },
    },

    created() {

    },
    mounted() {

    },
    components: {
        tableList,
        realMakeInvoiceComp,
    },
}
</script>

<style lang = "scss" scoped>
.InvoiceInfo2 {
    width: 100%;
    ::v-deep .el-upload{
        width: 100%;
    }
    ::v-deep .el-dialog__body{
        padding: 10px 20px ;
    }
    ::v-deep .el-dialog__footer{
        padding: 0px 20px 10px;
    }
    .www ::v-deep .el-dialog{
        margin-top: 0 !important;
        margin: 0 auto;
    }
    ::v-deep .el-upload-dragger{
        width: 100%;
    }
}

::v-deep .el-table__body tr.current-row > td {
  background-color: #fbec88 !important; 
}
::v-deep .el-table__body tr.current-row>td.el-table__cell {
  background-color: #fbec88 !important; 
}
</style>
